<template>
  <div class="login">
    <group>
      <x-input title="" name="username" placeholder="请输入登陆账号" v-model="username" required></x-input>
      <x-input title="" type="password" placeholder="请输入密码" v-model="password" :min="5" :max="16" required></x-input>
    </group>
    <box gap="10px 25px">
      <x-button type="primary" @click.native="handleLogin">登录</x-button>
    </box>
  </div>
</template>

<script>
import { XInput, Box, Group, XButton } from 'vux'
export default {
  name: 'login',
  data() {
    return {
      username: '', // 用户手机号
      password: '' // 用户密码
    }
  },
  components: {
    XInput,
    XButton,
    Group,
    Box
  },
  methods: {
    handleLogin() {
      var _this = this
      const loginForm = { username: _this.username, password: _this.password }
      _this.$store.dispatch('LoginByUsername', loginForm).then(() => {
        _this.$router.push({ path: '/home' })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="less">
@color666: #666666;
@color393a31: #393a31;
.input-box {
  background-color: #ffffff;
}
.login {
  > p:first-of-type {
    padding: 20px 15px 40px;
    float: right;
    color: @color666;
    font-size: 14px;
  }
  > p:last-of-type {
    width: 100%;
    text-align: center;
    color: @color393a31;
    font-size: 14px;
    position: absolute;
    bottom: 25px;
  }
}
.icon-wx {
  width: 18px;
  height: 14px;
  margin-right: 6px;
}
</style>
